<template>
	<div class="like">
		<div class="title">
			<img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png"/>
			<span>猜你喜欢</span>
		</div>
		<div class="main">
			<ul>
				<li v-for="item in likeList" :key="item.id" >
					<div class="img">
						<img :src="item.imgUrl" alt="" />
					</div>
					<div class="mains">
						<div class="h3">{{item.title}}</div>
						<p class="p1"><font color="#ffb436">★★★★★</font><span>{{item.discuss}}条评论</span></p>
						<p><span>￥<em class="em">{{item.price}}</em></span>起<span>{{item.addr}}</span></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	data (){
		return {
			likeList:[
			   {
			   	 id:1,
			   	 imgUrl:"http://img1.qunarzz.com/sight/p0/1710/f5/f575b0f463058f96a3.img.jpg_200x200_e772e5ef.jpg",
			   	 title:"宁乡炭河古城",
			   	 discuss:"4319",
			   	 price:"160",
			   	 addr:"宁乡县"
			   },
			   {
			   	 id:2,
			   	 imgUrl:"http://img1.qunarzz.com/sight/p0/1710/f5/f575b0f463058f96a3.img.jpg_200x200_e772e5ef.jpg",
			   	 title:"宁乡炭河古城",
			   	 discuss:"4319",
			   	 price:"170",
			   	 addr:"宁乡县"
			   },
			   {
			   	 id:3,
			   	 imgUrl:"http://img1.qunarzz.com/sight/p0/1710/f5/f575b0f463058f96a3.img.jpg_200x200_e772e5ef.jpg",
			   	 title:"宁乡炭河古城",
			   	 discuss:"4319",
			   	 price:"180",
			   	 addr:"宁乡县"
			   },
			   {
			   	 id:4,
			   	 imgUrl:"http://img1.qunarzz.com/sight/p0/1710/f5/f575b0f463058f96a3.img.jpg_200x200_e772e5ef.jpg",
			   	 title:"宁乡炭河古城",
			   	 discuss:"4319",
			   	 price:"190",
			   	 addr:"宁乡县"
			   },
			   {
			   	 id:5,
			   	 imgUrl:"http://img1.qunarzz.com/sight/p0/1710/f5/f575b0f463058f96a3.img.jpg_200x200_e772e5ef.jpg",
			   	 title:"宁乡炭河古城",
			   	 discuss:"4319",
			   	 price:"120",
			   	 addr:"宁乡县"
			   }
			]
			
			
			
			
		}
	}
}
	
	
	
	
</script>

<style scoped>
	.like {
		border-top: .1rem solid #EEEEEE;
	}
	.like  .title{
		font-size: .16rem;
		padding: .12rem .1rem .13rem .1rem;
		
	}
	.like  .title img{
		width: .15rem;
		height: .15rem;	
	}
	.like .main{
		width: 100%;
	}
	.like .main ul li .img{
		float: left;
	}
	.like .main ul li .img img{
		
		width: 1rem;
		height: 1rem;
		margin-left: 12px;
		display: block;
	}
	.like .main ul li{
		font-size: .12rem;
		height: 1.2rem;
	}
	.like .main ul li .mains{
		padding-left: 12px;
		display: block;
		height: .93rem;
		float: left;
		line-height: .3rem;
		width: 65%;
	}
	.like .main ul li .mains .h3{
		font-size: .16rem;
	}
	.like .main ul li .mains .p1{
		font-size: .14rem;
	}
	.like .main ul li .mains .p1 span{
		margin-left: 20px;
		color: #666;
	}
	.like .main ul li .mains p:last-child span:first-child{
		color: #ff8300;
	}
	.like .main ul li .mains em{
		font-size: .2rem;
	}
	.like .main ul li .mains p:last-child span:last-child{
		float: right;
		margin-right: 20px;
		padding-top: 5px;
	}
</style>